<template>
  <div class="main-box">
    <BaseTitle :title="formData.id ? '编辑版权信息' : '添加版权信息'">
      <template #right>
        <BackBtn />
      </template>
    </BaseTitle>
    <el-form ref="formRef" class="flexForm" :rules="rules" :model="formData" label-position="top">
      <SubTitle title="版权信息" class="row" />

      <el-form-item label="被授权主体：" prop="subject">
        <el-input placeholder="请输入被授权的公司名称或个人姓名" v-model="formData.subject" />
      </el-form-item>
      <el-form-item label="开始时间：" prop="begin_time">
        <el-date-picker v-model="formData.begin_time" type="date" value-format="yyyy-MM-dd"
          :placeholder="$t('请选择日期时间')" />
      </el-form-item>
      <el-form-item label="价格：" prop="price">
        <el-input placeholder="请输入价格" v-model="formData.price" />
      </el-form-item>
      <el-form-item label="授权文件号：" prop="doc_no">
        <el-input placeholder="请输入文件号" v-model="formData.doc_no" />
      </el-form-item>

      <el-form-item label="类型：" prop="type">
        <el-select v-model="formData.type" @change="changeType">
          <el-option v-for="(item, index) in materialTypeEnums" :value="+index" :label="item" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商：" prop="supplier_name">
        <el-input placeholder="请输入供应商名称" v-model="formData.supplier_name" />
      </el-form-item>
      <el-form-item label="使用范围：" prop="use_range">
        <el-input type="textarea" placeholder="请输入使用范围" v-model="formData.use_range" :rows="4" />
      </el-form-item>

      <el-form-item label="授权文件：">
        <div class="multiBox">
          <div v-for="(item, idx) in formData.files" :key="idx" class="multiBoxItem">
            <img :src="item.url" class="attachmentImg" />
          </div>
          <BaseUpload :limit="5" v-model="formData.files" :show-list="false">
            <div class="attachment_imgBox">
              <i class="el-icon-camera" />
            </div>
            <p slot="description">最多可传5张图</p>
          </BaseUpload>
        </div>
      </el-form-item>

      <el-form-item label="到期时间：" prop="end_time">
        <el-date-picker v-model="formData.end_time" type="date" value-format="yyyy-MM-dd" placeholder="不写代表永久有效" />
      </el-form-item>
      <el-form-item label="创建时间：" v-if="copyright_id">
        <el-input v-model="formData.create_time" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建人：" v-if="copyright_id">
        <el-input v-model="formData.apply_user" disabled></el-input>
      </el-form-item>
      <el-form-item :label="`${$t('状态')}：`" v-if="copyright_id">
        <el-input v-model="formData.status_text" disabled></el-input>
      </el-form-item>

      <!-- 素材信息 -->
      <SubTitle title="素材信息" class="row" />
      <el-form-item label="录入方式：" prop="material_type">
        <el-radio-group v-model="formData.material_type" @change="changeMaterialType">
          <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <AddMaterial :material-dialog.sync="materialDialog" :material-type="formData.material_type" :type="formData.type"
      :material-detail="detail" @getMaterial="getMaterial" />
    <el-button type="primary" @click="handleOpenMaterial" style="margin-bottom: 16px">
      添加素材信息
    </el-button>
    {{ type }}
    <el-table :data="tableData" :key="formData.material_type">
      <el-table-column label="素材编号" prop="material_no"></el-table-column>
      <el-table-column prop="material_name">
        <template slot="header">
          <span>
            <i class="required">*</i>
            素材名称
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="material_link">
        <template slot="header">
          <span>
            <i class="required">*</i>
            {{ formData.material_type == 1 ? '素材网址' : '素材文件' }}
          </span>
        </template>
        <template slot-scope="scope">
          <div class="attachment_imgBox" v-if="formData.material_type == 2">
            <div v-if="formData.type == 1">
              <img v-if="scope.row.material_link" :src="scope.row.material_link" class="attachmentImg" />
              <i v-else class="el-icon-camera" />
            </div>
            <img src="@/assets/icon-video.png" v-else-if="formData.type == 2" class="icon-link" />
            <img src="@/assets/icon-audio.png" v-else-if="formData.type == 3" class="icon-link" />
            <img src="@/assets/icon-word.png" v-else-if="formData.type == 4" class="icon-link" />
          </div>
          <span v-else>{{ scope.row.material_link }}</span>
        </template>
      </el-table-column>
      <el-table-column label="素材封面">
        <template slot-scope="scope">
          <div class="attachment_imgBox">
            <img v-if="scope.row.material_cover" :src="scope.row.material_cover" class="attachmentImg" />
            <i v-else class="el-icon-camera" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="material_url">
        <template slot="header">
          <span>
            <i class="required">*</i>
            使用网址
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="right" width="100">
        <template slot-scope="scope">
          <EditBtn @click="handleEdit(scope)" />
          <DelBtn @success="handleDeleteTable(scope)" />
        </template>
      </el-table-column>
    </el-table>
    <div class="add-btn">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>

<script>
import copyrightApi from '@/api/copyright'
import { materialTypeEnums } from '@/enums/copyright'
import AddMaterial from './components/AddMaterial.vue'
export default {
  components: { AddMaterial },
  data() {
    return {
      materialDialog: false,
      dialogShow: false,
      attachmentType: 1,
      copyright_id: '',
      materialTypeEnums: Object.freeze(materialTypeEnums),
      tableData: [],
      typeOptions: [
        {
          label: '录入网址',
          value: 1
        },
        {
          label: '上传文件',
          value: 2
        }
      ],
      rules: {
        subject: {
          required: true,
          message: '请输入被授权的公司名称或个人姓名',
          trigger: 'blur'
        },
        type: {
          required: true,
          message: '请选择类型',
          trigger: 'blur'
        },
        supplier_name: {
          required: true,
          message: '请输入供应商名称',
          trigger: 'blur'
        },
        begin_time: {
          required: true,
          message: '请选择开始时间',
          trigger: 'change'
        },
        price: {
          required: true,
          message: '请输入价格',
          trigger: 'blur'
        },
        doc_no: {
          required: true,
          message: '请输入授权文件号',
          trigger: 'blur'
        },
        use_range: {
          required: true,
          message: '请输入使用范围',
          trigger: 'blur'
        },
        material_type: {
          required: true,
          message: '请选择录入方式',
          trigger: 'change'
        }
      },
      formData: {
        type: '',
        material_type: 1,
        subject: '',
        supplier_name: '',
        begin_time: '',
        end_time: '',
        price: '',
        doc_no: '',
        use_range: '',
        material_detail: '',
        files: null,
        id: ''
      },
      type: '',
      material_item: {},
      index: '',
      detail: {}
    }
  },

  mounted() {
    this.copyright_id = this.$route.query.id
    if (this.$route.query.id) {
      this.getInfo(this.copyright_id)
    }
  },
  methods: {
    handleEdit(scope) {
      this.index = scope.$index
      this.detail = this.$lodash.cloneDeep(scope.row)
      this.materialDialog = true
    },
    // 打开添加素材信息
    handleOpenMaterial() {
      if (this.formData.material_type) {
        if (this.formData.type) {
          this.index = ''
          this.detail = ''
          this.materialDialog = true
        } else {
          this.$message.error('请先选择类型')
        }
      } else {
        this.$message.error('请先选择录入方式和类型')
      }
    },
    getMaterial(data) {
      if (this.detail) {
        this.$set(this.tableData, this.index, data)
        this.tableData[this.index] = data
      } else {
        this.tableData.push(data)
      }
      console.log(this.tableData)
      this.materialDialog = false
    },

    // 切换类型 清空素材信息
    changeType() {
      this.tableData = []
    },
    // 更改录入方式
    changeMaterialType(data) {
      this.tableData = []
    },
    // 版权详情
    async getInfo(copyright_id) {
      const res = await copyrightApi.copyrightInfo({ copyright_id })
      if (res.code == 0) {
        const files = []
        res.data.info.files.map((el, index) => {
          files.push({
            url: el,
            name: index
          })
        })
        this.formData = {
          ...res.data.info,
          files: files
        }
        this.tableData = res.data.detail
        // this.tableData.forEach(item => {
        //   if (item.material_cover) {
        //     item.material_cover = [{ url: item.material_cover }]
        //   } else {
        //     item.material_cover = []
        //   }
        //   if (this.formData.marterial_type == 2) {
        //     item.material_link = [{ url: item.material_link }]
        //   }
        // })
      }
    },
    // 提交保存
    async handleSubmit() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null

        this.formData.material_detail = this.tableData
        if (this.formData.id) {
          result = await copyrightApi.editCopyright(this.formData)
        } else {
          result = await copyrightApi.addCopyright(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$emit('update:dialogShow', false)
          this.$emit('success')
          this.goBack()
        }
      }
    },
    // 添加素材信息
    handleAddData() {
      this.tableData.push({
        material_no: '',
        material_name: '',
        material_link: '',
        material_cover: '',
        material_url: ''
      })
    },
    // 删除table
    handleDeleteTable(scope) {
      this.tableData.splice(scope.$index, 1)
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.multiBox {
  display: flex;

  .multiBoxItem {
    width: 80px;
    margin-right: 8px;

    .attachmentImg {
      width: 100%;
      object-fit: cover;
    }
  }
}

.attachment_imgBox {
  position: relative;

  .attachmentImg {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 0 auto;
  }
}

.attachment_imgBox .img-actions {
  position: absolute;
  background: rgba($color: #000000, $alpha: 0.3);
  top: 0px;
  left: 0px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  opacity: 0;
}

.attachment_imgBox .img-actions>span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.attachment_imgBox .img-actions>span>i {
  color: var(--huocms-com-color-primary);
  font-size: 22px;
}

.attachment_imgBox:hover .img-actions {
  opacity: 1;
}

.icon-link {
  width: 80px;
  object-fit: cover;
}

i.required {
  color: var(--huocms-com-color-primary);
}

.add-btn {
  text-align: center;
  padding: 50px 0 30px 0;
}
</style>
